:root {
  --radius: 10px;  
  --border-eui: 1px solid #7777;
  --button-height: 70px;
  --margin: 10px;
  --btn-text: #fff;
  --mono-selection-color: #fff;
  --mono-selection-bg-color: #ccc7;
  /* --button-filter: saturate(0.5); */
  --button-filter: none;
  --on: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M284-262q-90.833 0-154.417-63.515Q66-389.029 66-479.765q0-90.735 63.583-154.485Q193.167-698 284-698h392q90.833 0 154.417 63.515Q894-570.971 894-480.235q0 90.735-63.583 154.485Q766.833-262 676-262H284Zm392-98q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"/></svg>');
  --off: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M284-262q-90.833 0-154.417-63.515Q66-389.029 66-479.765q0-90.735 63.583-154.485Q193.167-698 284-698h392q90.833 0 154.417 63.515Q894-570.971 894-480.235q0 90.735-63.583 154.485Q766.833-262 676-262H284Zm0-98q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"/></svg>');
  --draw: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M400-80v-164l294-292q12-12 26.5-18t30.5-6q16 0 30.5 6t26.5 18l49 50q11 12 17 26.5t6 29.5q0 15-6.5 29.5T856-374L564-80H400Zm349-298 51-52-49-50-52 52 50 50ZM430-590l-56-57 73-73H313q-9 26-28 45t-45 28v334q35 13 57.5 43.5T320-200q0 50-35 85t-85 35q-50 0-85-35t-35-85q0-39 22.5-69t57.5-43v-335q-35-13-57.5-43.5T80-760q0-50 35-85t85-35q39 0 69.5 22.5T313-800h134l-73-73 56-57 170 170-170 170Zm330-290q50 0 85 35t35 85q0 50-35 85t-85 35q-50 0-85-35t-35-85q0-50 35-85t85-35Z"/></svg>');
  --repair: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m440-380-237-30q-25-3-32.5-27t10.5-41l409-392q5-5 12-7.5t19-2.5q20 0 30.5 17t.5 35L520-580l237 30q25 3 32.5 27T779-482L370-90q-5 5-12 7.5T339-80q-20 0-30.5-17t-.5-35l132-248Z"/></svg>');
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --btn-text: #000;
    --mono-selection-color: #000;
    --mono-selection-bg-color: #3337;
  }
}

:root[data-theme="light"] {
  --btn-text: #000;
  --mono-selection-color: #000;
  --mono-selection-bg-color: #3337;
}

.draw-slider-wrp .splide__slide.is-active .refs-list__image>div {
  box-shadow: inset -8px 0px 0px -5px  var(--mono-selection-color),
      inset -10px 0px 8px -6px  var(--mono-selection-bg-color),
      inset 8px 0px 0px -5px  var(--mono-selection-color),
      inset 10px 0px 8px -6px  var(--mono-selection-bg-color);
}

#catalysers-list>.splide__slide.is-active, #cores-list>.splide__slide.is-active{
  box-shadow: inset -8px 0px 0px -5px var(--mono-selection-color),
      inset -10px 0px 8px -6px var(--mono-selection-bg-color),
      inset 8px 0px 0px -5px var(--mono-selection-color),
      inset 10px 0px 8px -6px var(--mono-selection-bg-color);
  border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur5);
  backdrop-filter: var(--blur5);
}

.popup {
  border-radius: 0px !important;
  border-width: 0px !important;
  padding: 10px !important;
  background-color: var(--background-transp);
  -webkit-backdrop-filter: var(--blur5);
  backdrop-filter: var(--blur5);
}

/* LAYERS POPUP */
.popup.layers-config, .popup.score {
  min-width: 250px;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: 0px 0px 5px 2px #7774;
}

.popup.layers-config {
  padding: 0 !important;
}

.layers-config__header {
  padding: 10px 10px 0 10px;
}

.layers-config__list {
  padding: 0 10px;
}

.layers-config__buttons button {
  min-height: 50px;
  width: 100%;
  border: none !important;
  text-transform: uppercase;
  font-size: 1.1em !important;
  font-weight: bold;
}

.layers-config__buttons button.popup-close {
  color: var(--btn-text);
  background-color: var(--accent);
}

/* INFO POPUP */
.info.popup {
  padding-bottom: 0px !important;
}

.info.popup .popup-close[data-round=true] {
  width: 100% !important;
}

@media (max-width: 425px) {
  .i-image-box {
    max-height: unset !important;
    min-height: unset !important;
  }
}

#i-image {
  border-radius: var(--radius);
}

.deploy-slider-wrp {
  margin: 0;
}

#deploy-slider {
  border: none !important;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: var(--button-height) !important;
  display: grid !important;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "Slider Deploy";
  margin: 0;
  direction: var(--sbgcui-point-btns-rtl, 'ltr');
}

#deploy-slider-track {
  padding: 5px 0;
  grid-area: Slider;
  background: linear-gradient(-90deg,#7772, #7772, #7777);
  direction: ltr;
}

#deploy {
  grid-area: Deploy;
  background-color: var(--sbgcui-branding-color, var(--selection));
  border: none;
  transition: background-color 0.25s linear;
}

#deploy:disabled {
  background: linear-gradient(90deg,#7772, #7777);
}

#discover {
  background-color: var(--sbgcui-branding-color, var(--selection));
  min-height: var(--button-height);
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: var(--margin);
  width: 100%;
  transition: background-color 0.25s linear;
}

#discover:disabled {
  color: #7777;
  background-color: #7777 !important;
  overflow: hidden;
}

.discover-progress {
  background-color: var(--selection);
}

#discover[data-time]:after {
  color: #fff;
  text-shadow: 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow);
  filter: drop-shadow(2px 4px 6px var(--text-shadow));
  transform: translate(0, -25px);
  width: 100%;
}

#bottom {
  margin: 0 -10px;
  width: calc(2 * var(--margin) + 100%);
  display: flex;
  justify-content: space-around;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  overflow: hidden;
}

#bottom button {
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--sbgcui-branding-color, var(--selection));
  font-weight: bold;
  font-size: small;
  min-height: var(--button-height);
  min-width: calc(20% - 1px);
  position: unset;
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

#bottom button, 
#discover:not([disabled]),
#deploy:not([disabled]) {
  color: #fff;
  filter: var(--button-filter);
}

#eui-repair::before {
  -webkit-mask: var(--repair);
  mask: var(--repair);
  background-color: currentColor;
  display: block;
  content: "";
  width: 100%;
  height: 40%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#draw::before {
  -webkit-mask: var(--draw);
  mask: var(--draw);
  background-color: currentColor;
  display: block;
  content: "";
  width: 100%;
  height: 40%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#draw:disabled {
  color:#ccc7;
}

#bottom #i-share, #bottom #i-copy-pos {
  font-size: 24px;

}

#bottom #i-share::after, #bottom #i-copy-pos::after {
  font-family: 'Manrope';
  font-weight: bold;
  font-size: small;
} 

#bottom #i-share::after {
  content: "Share point"
}

#bottom #i-copy-pos::after {
  content: "Copy position"
}

/* ATTACK */
#cores-list > .splide__slide, #catalysers-list > .splide__slide  {
  max-width: 70px !important;
}

.attack-slider-wrp {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0px 0px 5px 2px #7774;
}

#attack-slider {
  backdrop-filter: var(--blur5);
  border-radius: 0px !important;
}

.attack-slider-buttons {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#attack-slider-fire, 
#eui-attack-slider-fire {
  height: 50px;
  max-width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  color: #000;
  background-color: var(--selection);
}

/* DRAW */
.draw-slider-wrp {
  width: calc(100% - 10px);
}

#draw-slider {
  padding-bottom: 10px;
  border-radius: var(--radius) var(--radius) 0 0;
  border: var(--border-eui);
  border-bottom: none !important;
  background-color: var(--background-transp);
  backdrop-filter: var(--blur5);
}

.draw-slider-buttons {
  gap: 15px 0px;
  padding: 0px;
  margin: 0px;
}

.draw-slider-buttons button {
  font-weight: bolder;
  border: var(--border-eui);
}

#draw-slider-confirm {
  border-bottom-left-radius: var(--radius);
  border-right: none;
  border-top: none;
}

#draw-slider-close {
  border-bottom-right-radius: var(--radius);
  border-left: none;
  border-top: none;
  color: var(--btn-text);
  background-color: var(--accent);
}

.sbgcui_drawslider_sort {
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none !important;
}

.sbgcui_drawslider_fit {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: none !important;
}

/* BUTTONS */

.popup-close[data-round=true], #inventory__close[data-round=true] {
  color: #fff !important;
  border-color: var(--sbgcui-branding-color, var(--selection)) !important;
  background-color: var(--sbgcui-branding-color, var(--selection));
}

.settings-section__item select, 
.settings-section__item button:not(.popup-close),
#leaderboard__term-select,
.inventory__controls button,
.inventory__controls select,
.inventory__controls input[type="search"],
.profile.popup button {
  color: #fff !important;
  border-radius: 5px;
  border: none !important;
  background-color: var(--sbgcui-branding-color, var(--selection));
  filter: var(--button-filter);
  padding: 5px;
  text-transform: uppercase;
}

.settings-section__item select option:checked {
  background-color: #111c;
}

#inventory-delete[data-del="1"] {
  color: var(--btn-text) !important;
  background-color: var(--accent);
}

.inventory__controls input[type="search"]::placeholder {
  color: #fff;
}

input[type="range"] {
  padding: 0 !important;
}

/* INVENTORY */
.inventory__manage-amount {
  width: 300px;
  box-shadow: 3px 4px 7px -2px var(--shadow);
  border: none !important;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 10px 0 0 0 !important;
  z-index: 2;
}

.inventory__ma-counter {
  padding: 0.5em;
}

.inventory__ma-counter button {
  border: none !important;
  border-radius: 3px;
  min-height: 40px;
  min-width: 40px;
}

.inventory__ma-counter input {
  border-style: solid;
  border-color: #7773;
  background-color: #7773;
  border-radius: 3px;
  padding-left: 5px;
}

.inventory__ma-buttons {
  gap: 0;
}

.inventory__ma-buttons button {
  text-transform: uppercase;
  font-weight: bolder;
  min-height: 50px;
}

.inventory__ma-cancel {
  border: none !important;
  width: 100%;
}

.inventory__ma-delete {
  border: none !important;
  width: 100%;
  color: var(--btn-text);
  background-color: var(--accent);
}

.inventory__item-controls button {
  background-color: var(--sbgcui-branding-color, var(--selection));
  border-style: solid;
  border-radius: 3px;
  border-color: var(--sbgcui-branding-color, var(--selection));
  color: #fff;
}

.inventory__content {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  border-color: var(--sbgcui-branding-color, var(--selection));
}

#inventory__close {
  bottom: 120px;
  position: absolute;
  right: 50%;
  top: initial;
  transform: translateX(50%);
  z-index: 2;
}

.inventory__header {
  order: 2;
  margin-bottom: 10px;
  padding: 0;
  gap: 0;
}

.inventory__controls {
  order: 3;
}

.inventory__tabs {
  gap: 0;
  padding: 0;
  background-color: #7774;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.inventory__tab {
  flex-grow: 1;
  justify-content: center;
  border-top: 2px solid var(--border);
  border-top-color: var(--sbgcui-branding-color, var(--selection));
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.inventory__tab.active {
  color: var(--sbgcui-branding-color, var(--selection));
  background-color: var(--background-transp);
  border-top: none !important;
  border-bottom: 2px solid;
  border-color: var(--sbgcui-branding-color, var(--selection));
}

/* SETTINGS */
.settings-section__item input[type="checkbox"] {
  width: 0px;
  height: 0px;
  filter: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.settings-section__item input[type="checkbox"]::before {
  content: "";
  -webkit-mask: var(--on);
  mask: var(--on);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: block;
  height: 2.5em;
  width: 2.5em;
  background-color: var(--sbgcui-branding-color, var(--selection));
  transform: translate(-1.25em, -1.25em);
  transition: background-color 0.15s ease-in-out;
}

.settings-section__item input[type="checkbox"]:not(:checked)::before {
  -webkit-mask: var(--off);
  mask: var(--off);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: block;
  height: 2.5em;
  width: 2.5em;
  background-color: #777c;
}

.settings-section__item input[type="checkbox"]:disabled::before {
  opacity: 0.5;
}

#eui-links-opacity:disabled, #eui-regions-opacity:disabled {
  filter: grayscale(1);
}

.settings-section__header, .pr-stats__section-header {
  color: var(--sbgcui-branding-color, var(--selection));
}

/* HOME SCREEN BUTTONS */
.ol-control {
  background-color: var(--background-transp) !important;
  padding: 0.25em;
  box-shadow: 0px 0px 5px 2px #7774;
  backdrop-filter: var(--blur5);
  left: unset !important;
}

.ol-zoom.ol-control {
  right: 0 !important;
  border-radius: var(--radius) 0 0 var(--radius);
}

.sbgcui_toolbar-control {
  left: 0 !important;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.bottom-container #ops {
  background-color: var(--background-transp) !important;
  left: -5px;
  bottom: -15px;
  border: none !important;
  border-radius: 0 var(--radius) 0 0;
  box-shadow: 0px 0px 5px 2px #7774;
  backdrop-filter: var(--blur5);
}

.ol-control button {
  background-color: transparent !important;
}

#ops #self-info__inv {
  display: flex;
  flex-direction: column;
  --sbgcui-inventory-limit: "3000";
}

#attack-menu {
  background-color: var(--background-transp);
  border: none !important;
  box-shadow: 0px 0px 5px 2px #7777;
  backdrop-filter: var(--blur5) !important;
}

#attack-menu.sbgcui_attack-menu-rotate {
  border-bottom-style: none !important;
  border-top-style: none !important;
}

#attack-menu::after {
  border-radius: 100px;
}

#ops #self-info__inv::after {
  border-top: 1px solid var(--sbgcui-branding-color, var(--border));
}

/* CUI Compatibility */
#discover>span::before {
  width: 50% !important;
}

.sbgcui_navbutton, .sbgcui_jumpToButton {
  font-size: unset;
  position: unset;
}

#bottom button.fa::before {
  height: 35%;
}

.inventory__content[data-tab="3"] .inventory__item-controls::after {
  background-color: var(--sbgcui-branding-color, var(--selection));
}

/* DRAW & REPAIR BUTTONS */